{% extends 'layouts/base.html' %}
{% block content %}
<style>
    label.error {
        color: red;
        font-size: 16px;
        font-weight: normal;
        line-height: 1.4;
        margin-top: 0.5em;
        width: 100%;
        float: none;
    }
    .order_wrap .weui_cells_form .weui_cell .left_top_label_box{
        vertical-align: top;
    }

    .weui_cell .right_select {
        text-align: right;
        float: right;
        width: auto;
        padding-right: 16px;
    }
    .invoice_wrap{
        overflow: hidden;
    }
    .invoice_wrap .weui_cells{
        margin-top: 15px;
        font-size: 16px;
    }
    .invoice_wrap .weui_cells .row_cell_two{
        padding: 13px 15px;
        font-size: 16px;
        line-height: 24px;
    }
    .invoice_wrap .weui_cells .row_cell_three{
        padding: 14px 15px;
        font-size: 16px;
        line-height: 24px;
    }
    .invoice_wrap .weui_cells .top_hd{
        padding-top: 8px;
    }
    .invoice_wrap .weui_cells .invoice_btn_box{
        padding-top: 4px;
    }
    .invoice_wrap .weui_cell .weui_cell_hd .text_label{
        width: 6em;
    }
    .invoice_wrap .weui_cells_checkbox .weui_icon_checked:before {
        content: '\EA01';
        color: #C9C9C9;
        font-size: 21px;
        display: block;
    }
    .invoice_wrap .weui_cells .weui_cell_hd .weui_icon_checked:before{
        display: inline-block;
    }
    .invoice_wrap .weui_cells_checkbox .weui_check:checked +.weui_icon_checked:before {
        content: '\EA06';
        color: #FF5402;
    }
    .invoice_wrap .weui_cells .weui_cell_hd .checkbox_icon_tips{
        display: inline-block;
        padding-right: 20px;
        font-size: 15px;
    }
    .invoice_wrap .weui_cell .tips_invoice{
        padding-left: 6px;
        font-size: 12px;
        color: #888888;
    }
    .invoice_wrap .weui_cell .weui_cell_hd{
        overflow: hidden;
    }
    .invoice_wrap .weui_cell .weui_cell_hd .invoice_btn{
        border: 1px solid  #888888;
        color: #333333;
        line-height: 25px;
        font-size: 14px;
        padding: 0 .75em;
        display: inline-block;
        border-radius: 5px;
    }
    .invoice_wrap .weui_cell .weui_cell_hd .invoice_btn.btn_two{
        margin-left: 20px;
    }
    .invoice_wrap .weui_cell .weui_cell_hd .invoice_btn.hover{
        border: 1px solid  #FF5402;
        color: #FF5402;
    }
    .invoice_wrap .btn_box{
        padding: 15px 20px;
    }
    .invoice_wrap .btn_box .submit_btn{
        border-radius: 5px;
        background-color: #FF5402;
    }
    .invoice_wrap .go_top{
        vertical-align: top;
    }

</style>
<form action="{{ url('index/order/addComboOrder') }}" method="post" id="comboForm">
    <div id="container" class="bj_color order_wrap">
        <div class="weui_cells nomargintop">
            <div class="weui_cell weui_cell_select weui_select_after row_cell">
                <div class="weui_cell_hd">
                    选择套餐
                </div>
                <div class="weui_cell_bd weui_cell_primary right_select_box">
                    <select class="weui_select right_select" name="combo_id" as="combo_select">
                        {% for v in combo %}
                        <option value="{{v.id}}" price='{{v.price}}'>{{v.name}}</option>
                        {%endfor%}
                    </select>
                </div>
            </div>
        </div>
        <div class="data">
            <div class="tr th">
                <div class="td td-1 tr-title"><p>套餐类型</p></div>
                <div class="td td-2"><p>服务内容</p></div>
                <div class="td td-3"><p>价格</p></div>
            </div>
            {% for v in combo%}
            <div class="tr" as="combo_content">
                <div class="td td-1 tr-title"><p>{{v.name}}</p></div>
                <div class="td td-2">
                    {{v.content|raw}}
                </div>
                <div class="td td-3">
                    <p>{{v.price}}元</p>    
                </div>
            </div>
            {%endfor%}
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">如何称呼您</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="client_name" class="weui_input" type="text" placeholder="请输入您的姓名"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">您的电话号码</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="client_phone" class="weui_input" type="tel" placeholder="请输入您的号码"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">预约的日期</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="carrydate" class="weui_input" type="date" placeholder="请输入您的搬运日期"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">从哪里出发</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="start_address" class="weui_input" type="text" placeholder="请输入起始地"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd left_top_label_box"><label class="weui_label text_label">要搬到哪里</label></div>
                <div class="weui_cell_bd weui_cell_primary ">
                    <input name="arrive_address" class="weui_input" type="text" placeholder="请输入目的地"/>
                </div>
            </div>
            <div class="weui_cell">
                <p>物品详细情况(备注)</p>
                <div class="weui_cell_bd weui_cell_primary">
                    <textarea name="remark" class="weui_textarea" rows="3" placeholder="请描述物品，包裹数量"></textarea>
                </div>
            </div>

            {%if card != empty%} 
            <div class="weui_cell weui_cell_select row_cell">
                <div class="weui_cell_hd">
                    优惠券
                </div>
                <div class="weui_cell_bd weui_cell_primary right_select_box">
                    <select class="weui_select right_select" name="card_code" id ='wechat_card'>     
                        <option value="" >请选择</option>  
                        {%for v in card%}
                        <option value="{{v.card_code}}"card_fee="{{v.card_fee}}" cardID="{{v.cardID}}">{{v.card_title}}</option>                               
                        {%endfor%}
                    </select>
                    <input type="hidden" name="cardID" id="cardID" value=""/>
                </div>
            </div>    
            {%endif%}
        </div>

        <div class="pay_info">
            <div class="sum_money">一共费用:<span class="red_font"  id="total_price">0.00</span>元 按{{deposit}}%的预约金额：<span class="red_font" id="deposit_price">0.00</span>元  预约金额最低为{{mini_deposit}}元 {%if card != empty%} 优惠立减<span class="red_font"  id="coupon">0.00</span>元{%endif%}</div>
            <div class="sum_money">余款:<span class="red_font" id="spare_price">0.00</span>元 (根据实际情况或有浮动，订单完成后由搬运人员收取)</div>
            <div class="padding_box">
                选择发票: <label class="radio-padding">
                    <input type="radio" name="is_bill" id="Radio1" value="1" > 是
                </label>
                <label class="">
                    <input type="radio" name="is_bill" id="Radio2" value="0" checked> 否
                </label>
                <p>提示：需要填写发票。备注提醒用户填写后无法更改。</p>
            </div>
        </div>

        <div class="btn_box">
            <a class="weui_btn submit_btn" href="javascript:" id="submit">下单</a>
        </div>
    </div>
    <div class="bj_color invoice_wrap" id="bill_info" style="display:none;">
        <div class="weui_cells  weui_cells_checkbox">
            <div class="weui_cell row_cell_three">
                <p>是否开发票</p>
                <div class="weui_cell_hd top_hd">
                    <label class="" for="radio1">
                        <input type="radio" class="weui_check" name="radio1" id="radio1" checked="checked">
                        <i class="weui_icon_checked"></i>
                        <p class="checkbox_icon_tips">是</p>
                    </label> 
                    <label class="" for="radio2">
                        <input type="radio" class="weui_check" name="radio1" id="radio2" checked="checked">
                        <i class="weui_icon_checked"></i>
                        <p class="checkbox_icon_tips">否</p>
                    </label> 
                </div>
            </div>   
        </div> 
        <div class="weui_cells">
            <div class="weui_cell row_cell_three">
                <p>发票类型<label class="tips_invoice">（注：专用发票收取17%，普通发票收取6%）</label></p>
                <div class="weui_cell_hd invoice_btn_box">
                    <span class="invoice_btn hover">增值税专用发票</span> <span class="invoice_btn btn_two">增值税普通发票</span>
                </div>
            </div>   
        </div> 
        <div class="weui_cells">
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">发票抬头</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="请输入公司名称"/>
                </div>
            </div>
        </div> 
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">收票人信息</label></div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">纳税识别号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="请输入纳税人识别号"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">开户人姓名</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="请输入开户人姓名"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">户名账号</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="户名账号"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">收票人手机</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="tel" placeholder="请输入收票人手机"/>
                </div>
            </div>
            <div class="weui_cell row_cell_two">
                <div class="weui_cell_hd"><label class="weui_label text_label">收票人地址</label></div>
                <div class="weui_cell_bd weui_cell_primary">
                    <input class="weui_input" type="text" placeholder="收票人地址"/>
                </div>
            </div>
        </div>
        <div class="btn_box">
            <a class="weui_btn submit_btn" href="javascript:">确定</a>
        </div>
    </div>   
</form>
{% endblock %}
{% block script %} 
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.validate.min.js"></script>
<script>
$(function () {
    var select = $("select[as='combo_select']");
    var deposit = parseInt("{{deposit}}");
    var total_price = $("#total_price");
    var deposit_price = $("#deposit_price");
    var change_combo = function () {
    var mini_deposit = {{mini_deposit}};
        var option = select.find("option:selected");
        var index = select.find("option").index(option);
        var price = option.attr('price');
        $("div[as='combo_content']").each(function () {
            if (($(this).index() - 1) == index) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        var rate = Math.ceil(price * (deposit / 100));
        total_price.text(price);
        if (rate < mini_deposit) {
            rate = mini_deposit;
        }
        deposit_price.text(rate);
    };
    change_combo();
    select.change(function () {
        change_combo();
    });
    $('#submit').click(function () {
        $('form').submit();
    });
//优惠券
    $('#wechat_card').change(function () {
        var value = $(this).find('option:selected').attr('card_fee');
        var cardID = $(this).find('option:selected').attr('cardID');
        value = (value / 100);
        if (!isNaN(value)) {
            value += '.00';
        }
        $('#cardID').val(cardID);
        $('#coupon').text(value);
    });
    String.prototype.replaceAll = function (str1, str2) {
        var str = this;
        var result = str.replace(eval("/" + str1 + "/gi"), str2);
        return result;
    };
// 手机号码验证
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    jQuery.validator.methods.compareDate = function (value, element) {
//var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式
//value = value + ":00";

        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replaceAll("-", "/")));
        var today = new Date();
        return date1 >= today;
    };
    jQuery.validator.methods.maxDate = function (value, element) {
        var startDate = value;
        var date1 = new Date(Date.parse(startDate.replaceAll("-", "/")));
        date1 = date1.getTime();
        var today = new Date();
        today = today.getTime();
        today += (3600000 * 24 * 7);
        return date1 <= today;
    };
    $("form").validate({
        rules: {
            client_name: {
                required: true,
                maxlength: 10
            },
            client_phone: {
                required: true,
                isMobile: true
            },
            carrydate: {
                required: true,
                compareDate: true,
                maxDate: true
            },
            start_address: {
                required: true,
                maxlength: 50
            },
            driver_address: {
                required: true,
                maxlength: 50
            }
        },
        messages: {
            client_name: {
                required: '请输入您的姓名！',
                maxlength: '长度不能超过10个字符！'
            },
            client_phone: {
                required: '手机号码不能为空！',
                isMobile: '请正确填写您的手机号码！'
            },
            carrydate: {
                required: '请输入预约日期！',
                compareDate: "搬运日期必须大当前日期！",
                maxDate: '搬运日期不能大于一周后！'
            },
            start_address: {
                required: '请输入起始地！',
                maxlength: '不能超过50个字符！'
            },
            driver_address: {
                required: '请输入目的地！',
                maxlength: '不能超过50个字符！'
            }
        }
    });
    $(".invoice_btn_box span").click(
        function(){
         $(this).addClass("hover").siblings("span").removeClass("hover");
        }
    );
    
});
</script>
{% endblock %}